<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <style>
        html, body {
            background-color: white;
        }
        .outer{
            padding: 0 15px;
        }
        .bicycle{
            width: 100%;
            height: 60px;
            margin-top: 14px;
            display: -webkit-flex;
            display: flex;
            -webkit-justify-content: center;
            -webkit-align-items: center;
        }
        .bicycle img{
            height: 30px;
        }
        .title{
            font-size: 15px;
            line-height: 15px;
            color: #1a1a1a;
            text-align: center;
        }
        .total{
            font-size: 19px;
        }
        .shop_address{
            overflow: hidden;
            font-size: 13px;
            line-height: 57px;
            border-bottom: 1px solid #e8e8e8;
            color: #333333;
            display: -webkit-flex;
            align-items: center;
            min-height: 58px;
        }
        .shop_address img{
            width: 18px;
            height: 18px;
            margin-right: 6px;
            float: left;
            display: block;
        }
        .shop_address span{
            float: left;
            flex: 1;
            display: block;
            line-height: 20px;
            padding: 0;
        }
        .user_address{
            font-size: 13px;
            overflow: hidden;
            line-height: 57px;
            border-bottom: 1px solid #e8e8e8;
            color: #999999;
            display: -webkit-flex;
            align-items: center;
            min-height: 58px;
        }
        .user_address img{
            width: 18px;
            height: 18px;
            margin-right: 6px;
            float: left;
            display: block;
        }
        .user_address span{
            float: left;
            flex: 1;
            display: block;
            line-height: 20px;
            padding: 5px 0;
        }
        .distance{
            font-size: 14px;
            color: #999999;
            overflow: hidden;
            line-height: 34px;
            margin-bottom: 15px;
            margin-top: 5px;
        }
        .km{
            float: left;
        }
        .kilometer{
            color: #e6244e;
            float: left;
        }
        .tick{
            font-size: 13px;
            color: #333;
            line-height: 13px;
            /*margin-top: 79px;*/
            display: -webkit-flex;
            display: flex;
            -webkit-justify-content: left;
            -webkit-align-items: left;
            display: none;
        }
        .suqre{
            width: 11px;
            height: 11px;
            border-radius: 3px;
            margin-right: 9px;
            border: 1px solid #999;
            background: #f7f7f7;
        }
        .suqre.active{
            background: #e62442;
        }
        .confirm{
            background: #e62442;
            color: white;
            height: 45px;
            text-align: center;
            width: 100%;
            line-height: 45px;
            font-size: 16px;
            margin-top: 20px;
            border-radius: 5px;
            display: none;
        }
        .pay_type .active .li_pay{
          border:1px solid #e62442 !important;
        }
        .pay_type {
            overflow: hidden;
            margin:10px 0 15px 0;

        }
        .pay_type li {
            width: 50%;
            float: left;
            padding: 0 8px 0 0;
            box-sizing: border-box;
        }
        .pay_type li:nth-child(2n) {
            padding: 0 0 0 8px;
        }
        .pay_type li .li_pay {
            height: 55px;
            border: 1px solid #ccc;
            border-radius: 5px;
            display: -webkit-box;
            -webkit-box-align: center;
            -webkit-box-pack: center;
        }
        .pay_type li .li_pay img {
            width: 31px;
            display: block;
            margin-right: 11px;
        }
        .pay_type li .li_pay span {
            display: block;
            color: #333;
            font-size: 12px;
        }
        .liner{
            background: #F8F8F8;
            width: 100%;
            height: 6px;
            margin-top: 37px;
        }
        .liner2{
            background: #F8F8F8;
            width: 100%;
            height: 1px;
        }
        .pay_title{
            font-size: 15px;
            color: #333;
            margin-top: 10px;
            line-height: 25px;
        }
        .total_distance{
            float: left;width: 59px;text-align: center;
        }
        .package_start_tel{
            margin-left: 10px;
        }
    </style>
</head>
<body>
	<div id="wrap">
        <div class="bicycle">
            <img src="../image/seller_icon3.png">
        </div>
        <div class="title">附近有&nbsp;<span class="total">&nbsp;</span>&nbsp;名骑手</div>
        <div class="liner"></div>
        <div class="outer">
            <div class="shop_address" tapmode onclick="fnChooseAddress('start');">
                <img src="../image/3.png">
                <span class="address">
                    <p style="color: #333;" class="delivery_address">当前位置</p>
                    <p style="color: #999;" class="delivery_name_and_phone">
                        <span class="package_start_username">---</span>
                        <span class="package_start_tel">---</span>
                    </p>
                </span>
            </div>
            <div class="user_address" tapmode onclick="fnChooseAddress('end');">
                <img src="../image/client_address.png">
                <span class="delivery">
                    <p style="color: #333;" class="destination_address">请选择收货地址</p>
                    <p style="color: #999;" class="destination_name_and_phone"></p>
                    
                </span>
            </div>
            <div class="distance">
                <span class="km">距离</span>
                <span class="total_distance">&nbsp;</span>
                <span class="kilometer">KM</span>
            </div>
        </div>
        <div class="liner2"></div>
        <div class="outer">
            <div class="pay_title">支付方式</div>
            <ul class="pay_type">
                <li class="active" onclick="fnPayType(1,this);" tapmode>
                  <div class="li_pay">
                    <img style="width: 80px;" src="../image/paydollar.png">
                  </div>
                </li>
                <li onclick="fnPayType(2,this);" tapmode>
                    <div class="li_pay">
                        <img src="../image/cmb.png">
                        <span>支付宝        </span>
                    </div>
                </li>
            </ul>
            <div class="tick" tapmode onclick="toAccept();">
                <span class="suqre"></span>
                <span class="info">我确认已将包裹存放在该店</span>
            </div>
            <input type="hidden" class="money">
        </div>
        <div class="confirm" tapmode onclick="toOrder();">确认下单</div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">

    var isAccept = 1;
    var address_id = false;
    var payType = 1; // 默认paydollar支付
    var addressDetail = {}; // 定义当前位置

    apiready = function(){
        user = $api.getStorage('user_data');

        getInitData();

        api.addEventListener({
            name: 'choosePackageAddress'
        }, function(ret, err){
            if( ret ){
                var address_id = ret.value.address_id;
                var packageType = ret.value.packageType;
                if(packageType == 'start'){
                    // 选中的是开始地址
                    addressDetail.start_id = address_id;
                }else if(packageType == 'end'){
                    // 选中的是收货地址
                    addressDetail.end_id = address_id;
                }
                if(addressDetail.start_id || (addressDetail.start_lon && addressDetail.start_lat)){
                    fnGetPackageInfo();
                }
            }
        });
    };

    function evSubmitPackage () {
        if(!addressDetail.start_id && !addressDetail.start_lon && !addressDetail.start_lat){
            toast('当前位置不能为空');
        }else if (!addressDetail.end_id){
            toast('收货地址不能为空');
        }else if ($(".total_distance").text() > 5){
            toast('包裹距离不能大于5公里');
        }else{
            // 如果是支付宝支付，先return，到时要注释掉 - tim 2018年04月11日12:32:21
            if(payType != 1){
              api.toast({
                msg: '支付宝支付',
                location: 'middle'
              });
              return;
            }
            api.confirm({
                title: '提示',
                msg: 'Goods delivery, parcel or documentation are not allow to exceed 10kg, and must fit in the delivery bag. Dimension: 40cm x 40cm x 40cm.',
                buttons: ['确定', '取消']
            }, function(ret, err){
                var index = ret.buttonIndex;
                if( index == 1 ){
                    fnPreCreateOrder();
                }
            });
        }
    };

    function fnPayType(type,this_) {
      $('.pay_type li').removeClass('active');
      $(this_).addClass('active');
      payType = type;
    }


    function fnPreCreateOrder () {
        api.ajax({
            url : rootPath + '/api/order/create_prepackage_order',
            method: 'post',
            data: {
                values: { 
                    // address_id: address_id,
                    // shop_id: shop_id,
                    uid : user.id,
                    token:user.token,
                    pay_type : payType,
                    addressDetail : JSON.stringify(addressDetail)
                },
            }
        }, function(ret, err) {
            if (ret && ret.status == 200) {
                if(payType == 1){
                  fnPaydollarPay(ret.order_id);
                }else{
                  api.toast({
                    msg: '支付宝支付',
                    location: 'middle'
                  });
                }
                // openSuccessFrame(ret.data);
            } else {
                api.toast({
                  msg: '下单失败',
                  location: 'middle'
                });
            }
        });
    };

    function fnPaydollarPay (order_id) {
      api.openWin({
          name: 'paydollar',
          url: './paydollar.html',
          pageParam: {
              order_id: order_id
          }
      });
    }

    

    function toAccept () {
        if(isAccept == 0){
            isAccept = 1;
            $(".suqre").addClass('active');
        }else{
            isAccept = 0;
            $(".suqre").removeClass('active');
        }
    }


    function fnChooseAddress (_type) {
        api.openWin({
            name: 'package_address',
            url: 'package_address.html',
            pageParam:{
                packageType : _type
            }
        });
    };

    // 获取初始化数据 - 经纬度和地址信息，骑手数量
    function getInitData () {
        var GoogleMap = api.require('googleMap');
        GoogleMap.getLocation(function(ret) {
            if (ret.status) {
                addressDetail.start_lon = ret.lon;
                addressDetail.start_lat = ret.lat;
                GoogleMap.getNameFromCoords({
                    lon: ret.lon,
                    lat: ret.lat
                }, function(ret2) {
                    if (ret2.status) {
                        var systemType = api.systemType;
                        if(systemType == 'ios'){
                            var _address = ret2.state+ret2.city+ret2.district+ret2.thoroughfare;
                        }else{
                            var _address = ret2.addressLines[0];
                        }
                        $(".delivery_address").html(_address);
                        $(".package_start_username").html(user.nickname);
                        $(".package_start_tel").html(user.phone);
                        addressDetail.package_start_address = _address;
                        addressDetail.package_start_username = user.nickname;
                        addressDetail.package_start_tel = user.phone;
                        fnGetPackageInfo();
                    }
                });
            }
        });
    };

    function fnGetPackageInfo () {
        openLoading();
        api.ajax({
            url : rootPath + '/api/user/get_package_info',
            method: 'post',
            data: {
                values: { 
                    uid : user.id,
                    token:user.token,
                    addressDetail : JSON.stringify(addressDetail)
                },
            }
        }, function(ret, err) {
            if (ret) {
                if(ret.status == 200){
                    if(ret.data.end_address && ret.data.end_address.address_detail){
                        $(".destination_address").html(ret.data.end_address.address_detail);
                        $(".destination_name_and_phone").html(ret.data.end_address.username+'&nbsp;&nbsp;'+ret.data.end_address.tel);
                    }
                    if(ret.data.start_address && ret.data.start_address.address_detail){
                        $(".delivery_address").html(ret.data.start_address.address_detail);
                        $(".package_start_username").html(ret.data.start_address.username);
                        $(".package_start_tel").html(ret.data.start_address.tel);
                        addressDetail.package_start_address = ret.data.start_address.address_detail;
                        addressDetail.package_start_username = ret.data.start_address.username;
                        addressDetail.package_start_tel = ret.data.start_address.tel;
                    }
                    if(addressDetail.end_id){
                        // 有选中收货地址，则显示距离
                        $(".total_distance").html(parseFloat(ret.data.distance/1000).toFixed(2));
                    }else{
                        $(".total_distance").html('&nbsp;');
                    }
                    if(ret.data.money){
                        $(".money").html(ret.data.money);
                        api.execScript({
                            name: 'package',
                            script: 'evChangeMoney("'+ret.data.money+'");'
                        });
                    }
                    $(".total").html(ret.data.num);
                }
            }
            closeLoading();
        });
    };

</script>
</html>







